import {Tabs, Affix, Row, Button} from 'antd'
import {useLocation, connect, useDispatch, history} from 'umi'
import React, {useEffect, useState} from 'react'
import Details from './details'
import RepaymentDetails from './repayment'
import OperationRecord from './operationRecord'
import styles from '../index.less'
import {getOrderDetails} from '@/service/order'

function OrderDetails(props: any) {
	const {
		global: {currentRoute},
	} = props
	const dispatch = useDispatch()
	const [data, setDate] = useState()
	const {
		query: {type},
	}: any = useLocation()
	useEffect(() => {
		const data1 = props
		const id = data1?.location?.query?.id
		getOrderDetails(id).then((res: any) => {
			if (res.success) {
				setDate(res.data)
			}
		})
	}, [])
	return (
		<div className={styles.page}>
			<Tabs
				type="card"
				defaultActiveKey="1"
				// onChange={onTabsChange}
				items={[
					{
						label: '订单详情',
						key: '1',
						children: <Details info={data} />,
					},
					{
						label: '还款明细',
						key: '2',
						children: <RepaymentDetails info={data} />,
					},
					{
						label: '操作记录',
						key: '3',
						children: <OperationRecord info={data} />,
					},
				]}
			/>
			{!type && (
				<Affix offsetBottom={2}>
					<Row style={{justifyContent: 'center', background: '#fff'}}>
						<Button
							onClick={(e) => {
								e.stopPropagation()
								dispatch({
									type: 'global/deleteTabs',
									payload: currentRoute,
								})
								history.goBack()
							}}>
							关闭
						</Button>
					</Row>
				</Affix>
			)}
		</div>
	)
}

export default connect(({global}: any) => ({global}))(OrderDetails)
